<template>
  <div class="game-achievements">
    <div class="page-header">
      <el-button :icon="ArrowLeft" @click="goBack">返回</el-button>
      <div class="header-title">
        <h1>🏆 游戏成就系统</h1>
        <p>完成挑战，解锁成就，获得荣誉徽章</p>
      </div>
    </div>

    <!-- 用户进度概览 -->
    <div class="progress-overview">
      <el-card>
        <div class="user-level">
          <el-avatar :src="userAvatar" :size="100" />
          <div class="level-info">
            <h2>{{ userName }}</h2>
            <div class="level-badge">
              <el-tag :type="getLevelType()" size="large">Lv.{{ userLevel }}</el-tag>
              <span class="level-title">{{ getLevelTitle() }}</span>
            </div>
            <el-progress 
              :percentage="levelProgress" 
              :stroke-width="12"
              :color="getLevelColor()"
            />
            <p class="level-exp">{{ currentExp }} / {{ nextLevelExp }} EXP</p>
          </div>
        </div>
      </el-card>

      <el-row :gutter="20" class="stats-cards">
        <el-col :span="6">
          <el-card shadow="hover">
            <el-statistic title="总积分" :value="totalPoints">
              <template #prefix>
                <el-icon><Trophy /></el-icon>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <el-statistic title="解锁成就" :value="`${unlockedCount}/${totalAchievements}`">
              <template #prefix>
                <el-icon><Medal /></el-icon>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <el-statistic title="完成游戏" :value="completedGames">
              <template #prefix>
                <el-icon><Select /></el-icon>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
              <el-statistic title="稀有徽章" :value="rareBadges">
              <template #prefix>
                <el-icon><Star /></el-icon>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 成就分类 -->
    <el-tabs v-model="activeCategory" class="achievement-tabs">
      <el-tab-pane label="全部成就" name="all" />
      <el-tab-pane label="IT技术" name="it" />
      <el-tab-pane label="零售管理" name="retail" />
      <el-tab-pane label="制造生产" name="manufacturing" />
      <el-tab-pane label="餐饮服务" name="food" />
      <el-tab-pane label="通用技能" name="general" />
      <el-tab-pane label="特殊成就" name="special" />
    </el-tabs>

    <!-- 成就列表 -->
    <div class="achievements-grid">
      <div 
        v-for="achievement in filteredAchievements" 
        :key="achievement.id"
        class="achievement-card"
        :class="{ 
          unlocked: achievement.unlocked,
          locked: !achievement.unlocked,
          rare: achievement.rarity === 'rare',
          epic: achievement.rarity === 'epic',
          legendary: achievement.rarity === 'legendary'
        }"
      >
        <div class="achievement-icon">
          {{ achievement.icon }}
          <div v-if="!achievement.unlocked" class="lock-overlay">
            <el-icon><Lock /></el-icon>
          </div>
        </div>
        
        <div class="achievement-info">
          <div class="achievement-header">
            <h3>{{ achievement.name }}</h3>
            <el-tag :type="getRarityType(achievement.rarity)" size="small">
              {{ getRarityText(achievement.rarity) }}
            </el-tag>
          </div>
          
          <p class="achievement-desc">{{ achievement.description }}</p>
          
          <div class="achievement-progress">
            <el-progress 
              :percentage="getAchievementProgress(achievement)" 
              :status="achievement.unlocked ? 'success' : undefined"
            />
            <span class="progress-text">
              {{ achievement.current }} / {{ achievement.target }}
            </span>
          </div>
          
          <div class="achievement-reward">
            <span>奖励:</span>
            <el-tag type="warning" size="small">
              <el-icon><Trophy /></el-icon>
              {{ achievement.points }} 积分
            </el-tag>
            <el-tag v-if="achievement.expReward" type="success" size="small">
              +{{ achievement.expReward }} EXP
            </el-tag>
          </div>
          
          <div v-if="achievement.unlocked" class="unlock-date">
            <el-icon><Clock /></el-icon>
            {{ achievement.unlockDate }}
          </div>
        </div>
      </div>
    </div>

    <!-- 成就详情对话框 -->
    <el-dialog
      v-model="showAchievementDialog"
      :title="selectedAchievement?.name"
      width="600px"
    >
      <div v-if="selectedAchievement" class="achievement-detail">
        <div class="detail-icon">{{ selectedAchievement.icon }}</div>
        <p class="detail-desc">{{ selectedAchievement.description }}</p>
        
        <el-descriptions :column="2" border>
          <el-descriptions-item label="稀有度">
            <el-tag :type="getRarityType(selectedAchievement.rarity)">
              {{ getRarityText(selectedAchievement.rarity) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="积分奖励">
            {{ selectedAchievement.points }}
          </el-descriptions-item>
          <el-descriptions-item label="进度">
            {{ selectedAchievement.current }} / {{ selectedAchievement.target }}
          </el-descriptions-item>
          <el-descriptions-item label="完成率">
            {{ getAchievementProgress(selectedAchievement) }}%
          </el-descriptions-item>
        </el-descriptions>
        
        <div v-if="selectedAchievement.hints" class="achievement-hints">
          <h4>💡 完成提示：</h4>
          <ul>
            <li v-for="(hint, index) in selectedAchievement.hints" :key="index">
              {{ hint }}
            </li>
          </ul>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import {
  ArrowLeft, Trophy, Medal, Select, Star, Lock, Clock
} from '@element-plus/icons-vue'

const router = useRouter()

// 用户信息
const userName = ref('张三')
const userAvatar = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')
const userLevel = ref(12)
const currentExp = ref(2580)
const nextLevelExp = ref(3000)
const totalPoints = ref(15680)
const completedGames = ref(48)
const rareBadges = ref(8)

// 等级进度
const levelProgress = computed(() => {
  return Math.round((currentExp.value / nextLevelExp.value) * 100)
})

// 成就统计
const totalAchievements = ref(50)
const unlockedCount = ref(23)

// 当前分类
const activeCategory = ref('all')

// 选中的成就
const selectedAchievement = ref(null)
const showAchievementDialog = ref(false)

// 成就列表
const achievements = ref([
  // IT技术成就
  {
    id: 1,
    name: '代码新手',
    icon: '👨‍💻',
    description: '完成第一个编程挑战',
    category: 'it',
    rarity: 'common',
    points: 50,
    expReward: 100,
    target: 1,
    current: 1,
    unlocked: true,
    unlockDate: '2024-01-15'
  },
  {
    id: 2,
    name: '调试大师',
    icon: '🐛',
    description: '成功找出50个Bug',
    category: 'it',
    rarity: 'rare',
    points: 150,
    expReward: 300,
    target: 50,
    current: 32,
    unlocked: false,
    hints: ['多玩代码调试游戏', '仔细观察代码细节']
  },
  {
    id: 3,
    name: '算法专家',
    icon: '🧮',
    description: '完成所有困难级别算法题',
    category: 'it',
    rarity: 'epic',
    points: 300,
    expReward: 500,
    target: 10,
    current: 6,
    unlocked: false,
    hints: ['挑战困难算法题', '理解常见算法原理']
  },
  {
    id: 4,
    name: '全栈工程师',
    icon: '⚡',
    description: '在IT类游戏中获得1000分以上',
    category: 'it',
    rarity: 'legendary',
    points: 500,
    expReward: 1000,
    target: 1000,
    current: 650,
    unlocked: false,
    hints: ['完成所有IT游戏', '追求完美表现']
  },
  
  // 零售管理成就
  {
    id: 5,
    name: '服务之星',
    icon: '⭐',
    description: '客户满意度达到100%',
    category: 'retail',
    rarity: 'common',
    points: 80,
    expReward: 150,
    target: 1,
    current: 1,
    unlocked: true,
    unlockDate: '2024-01-18'
  },
  {
    id: 6,
    name: '销售高手',
    icon: '💼',
    description: '成功服务100位客户',
    category: 'retail',
    rarity: 'rare',
    points: 200,
    expReward: 400,
    target: 100,
    current: 67,
    unlocked: false,
    hints: ['多玩客户服务游戏', '提高服务质量']
  },
  {
    id: 7,
    name: '金牌店长',
    icon: '👔',
    description: '连续10次完美服务',
    category: 'retail',
    rarity: 'epic',
    points: 350,
    expReward: 600,
    target: 10,
    current: 4,
    unlocked: false,
    hints: ['保持高满意度', '注意服务细节']
  },
  
  // 制造生产成就
  {
    id: 8,
    name: '生产新兵',
    icon: '🏭',
    description: '完成第一个生产订单',
    category: 'manufacturing',
    rarity: 'common',
    points: 60,
    expReward: 120,
    target: 1,
    current: 1,
    unlocked: true,
    unlockDate: '2024-01-20'
  },
  {
    id: 9,
    name: '效率达人',
    icon: '⚙️',
    description: '生产效率达到95%以上',
    category: 'manufacturing',
    rarity: 'rare',
    points: 180,
    expReward: 350,
    target: 95,
    current: 88,
    unlocked: false,
    hints: ['优化生产流程', '及时维护设备']
  },
  {
    id: 10,
    name: '质量卫士',
    icon: '🔍',
    description: '质量合格率保持100%',
    category: 'manufacturing',
    rarity: 'epic',
    points: 320,
    expReward: 550,
    target: 100,
    current: 92,
    unlocked: false,
    hints: ['严格质量控制', '不放过任何瑕疵']
  },
  
  // 餐饮服务成就
  {
    id: 11,
    name: '点餐新手',
    icon: '🍽️',
    description: '正确完成10个点餐订单',
    category: 'food',
    rarity: 'common',
    points: 70,
    expReward: 140,
    target: 10,
    current: 10,
    unlocked: true,
    unlockDate: '2024-01-22'
  },
  {
    id: 12,
    name: '记忆达人',
    icon: '🧠',
    description: '不看菜单完成5个复杂订单',
    category: 'food',
    rarity: 'rare',
    points: 190,
    expReward: 380,
    target: 5,
    current: 2,
    unlocked: false,
    hints: ['熟悉菜单', '训练记忆力']
  },
  {
    id: 13,
    name: '速度之王',
    icon: '⚡',
    description: '在30秒内完成订单',
    category: 'food',
    rarity: 'epic',
    points: 280,
    expReward: 500,
    target: 1,
    current: 0,
    unlocked: false,
    hints: ['提高反应速度', '熟练操作']
  },
  
  // 通用技能成就
  {
    id: 14,
    name: '知识学徒',
    icon: '📚',
    description: '答对100道题目',
    category: 'general',
    rarity: 'common',
    points: 100,
    expReward: 200,
    target: 100,
    current: 100,
    unlocked: true,
    unlockDate: '2024-01-25'
  },
  {
    id: 15,
    name: '博学多才',
    icon: '🎓',
    description: '每个类别至少完成一个游戏',
    category: 'general',
    rarity: 'rare',
    points: 250,
    expReward: 450,
    target: 5,
    current: 4,
    unlocked: false,
    hints: ['尝试不同类型游戏', '全面发展']
  },
  {
    id: 16,
    name: '完美主义者',
    icon: '💯',
    description: '在任意游戏中获得满分',
    category: 'general',
    rarity: 'epic',
    points: 400,
    expReward: 700,
    target: 1,
    current: 0,
    unlocked: false,
    hints: ['追求完美表现', '注意每个细节']
  },
  
  // 特殊成就
  {
    id: 17,
    name: '早起的鸟儿',
    icon: '🌅',
    description: '在早上6-8点完成游戏',
    category: 'special',
    rarity: 'rare',
    points: 120,
    expReward: 250,
    target: 1,
    current: 0,
    unlocked: false,
    hints: ['早起学习', '养成好习惯']
  },
  {
    id: 18,
    name: '连续签到',
    icon: '📅',
    description: '连续7天玩游戏',
    category: 'special',
    rarity: 'epic',
    points: 300,
    expReward: 500,
    target: 7,
    current: 5,
    unlocked: false,
    hints: ['保持学习习惯', '每天坚持']
  },
  {
    id: 19,
    name: '传奇玩家',
    icon: '👑',
    description: '解锁所有成就',
    category: 'special',
    rarity: 'legendary',
    points: 1000,
    expReward: 2000,
    target: 50,
    current: 23,
    unlocked: false,
    hints: ['完成所有挑战', '成为传奇']
  }
])

// 过滤成就
const filteredAchievements = computed(() => {
  if (activeCategory.value === 'all') {
    return achievements.value
  }
  return achievements.value.filter(a => a.category === activeCategory.value)
})

// 获取等级类型
function getLevelType() {
  if (userLevel.value >= 20) return 'danger'
  if (userLevel.value >= 10) return 'warning'
  return 'success'
}

// 获取等级称号
function getLevelTitle() {
  if (userLevel.value >= 20) return '传奇大师'
  if (userLevel.value >= 15) return '资深专家'
  if (userLevel.value >= 10) return '进阶学者'
  if (userLevel.value >= 5) return '初级学徒'
  return '新手'
}

// 获取等级颜色
function getLevelColor() {
  if (userLevel.value >= 20) return '#f56c6c'
  if (userLevel.value >= 10) return '#e6a23c'
  return '#409eff'
}

// 获取稀有度类型
function getRarityType(rarity) {
  const map = {
    common: 'info',
    rare: 'primary',
    epic: 'warning',
    legendary: 'danger'
  }
  return map[rarity] || 'info'
}

// 获取稀有度文本
function getRarityText(rarity) {
  const map = {
    common: '普通',
    rare: '稀有',
    epic: '史诗',
    legendary: '传说'
  }
  return map[rarity] || '普通'
}

// 获取成就进度
function getAchievementProgress(achievement) {
  return Math.min(100, Math.round((achievement.current / achievement.target) * 100))
}

// 返回
function goBack() {
  router.push('/learning/games/center')
}
</script>

<style scoped>
.game-achievements {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.header-title {
  flex: 1;
}

.header-title h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  color: #303133;
}

.header-title p {
  margin: 0;
  color: #606266;
}

/* 进度概览 */
.progress-overview {
  margin-bottom: 30px;
}

.user-level {
  display: flex;
  align-items: center;
  gap: 30px;
}

.level-info {
  flex: 1;
}

.level-info h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #303133;
}

.level-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.level-title {
  font-size: 16px;
  color: #606266;
  font-weight: 500;
}

.level-exp {
  margin: 8px 0 0 0;
  color: #909399;
  font-size: 14px;
}

.stats-cards {
  margin-top: 20px;
}

/* 成就网格 */
.achievement-tabs {
  margin-bottom: 30px;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.achievement-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 16px;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.achievement-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.achievement-card.unlocked {
  border-color: #67c23a;
}

.achievement-card.rare {
  background: linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 100%);
}

.achievement-card.epic {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}

.achievement-card.legendary {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
}

.achievement-card.locked {
  opacity: 0.7;
}

.achievement-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  flex-shrink: 0;
  position: relative;
}

.lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
}

.achievement-info {
  flex: 1;
  min-width: 0;
}

.achievement-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.achievement-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.achievement-desc {
  margin: 0 0 12px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
}

.achievement-progress {
  margin-bottom: 12px;
}

.progress-text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #909399;
}

.achievement-reward {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.achievement-reward span {
  font-size: 13px;
  color: #909399;
}

.unlock-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #67c23a;
}

/* 成就详情 */
.achievement-detail {
  padding: 20px;
}

.detail-icon {
  font-size: 80px;
  text-align: center;
  margin-bottom: 20px;
}

.detail-desc {
  text-align: center;
  margin: 0 0 24px 0;
  color: #606266;
  font-size: 16px;
  line-height: 1.6;
}

.achievement-hints {
  margin-top: 24px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
}

.achievement-hints h4 {
  margin: 0 0 12px 0;
  color: #303133;
}

.achievement-hints ul {
  margin: 0;
  padding-left: 24px;
  color: #606266;
  line-height: 2;
}

@media (max-width: 768px) {
  .achievements-grid {
    grid-template-columns: 1fr;
  }
  
  .user-level {
    flex-direction: column;
    text-align: center;
  }
  
  .stats-cards {
    flex-direction: column;
  }
}
</style>

